<div class="module-container">
    <div class="module-header"></div>
    <div class="module-body">
        <div class="cover">
            <div class="book">
                <label for="page-1" class="book__page book__page--1">
                    <img src="assets/images/article/cover.jpg" alt="">
                </label>

                <label for="page-2" class="book__page book__page--4">
                    <div class="page__content">
                        <h1 class="page__content-title">I</h1>
                        <div class="page__content-blockquote">
                            <p class="page__content-blockquote-text">HARI SELDON — . . . born in the 11,988th year of
                                the Galactic Era; died 12,069. The dates are more commonly given in terms of the current
                                Foundational Era as -79 to the year 1 F.E. Born to middle-class parents on Helicon,
                                Arcturus sector (where his father, in a legend of doubtful authenticity, was a tobacco
                                grower in the hydroponic plants of the planet), he early showed amazing ability in
                                mathematics. Anecdotes concerning his ability are innumerable, and some are
                                contradictory. At the age of two, he is said to have. . . </p>
                            <p class="page__content-blockquote-text">. . . Undoubtedly his greatest contributions were
                                in the field of psychohistory. Seldon found the field little more than a set of vague
                                axioms; he left it a profound statistical science. . . . </p>
                            <p class="page__content-blockquote-text">. . . The best existing authority we have for the
                                details of his life is the biography written by Gaal Dornick who, as a young man, met
                                Seldon two years before the great mathematician's death. The story of the meeting . .
                                .</p>
                            <span class="page__content-blockquote-reference">Encyclopedia Galactica*</span>
                        </div>
                        <div class="page__number">3</div>
                    </div>
                </label>

                <!-- Resets the page -->
                <input type="radio" name="page" id="page-1"/>

                <!-- Goes to the second page -->
                <input type="radio" name="page" id="page-2"/>
                <label class="book__page book__page--2">
                    <div class="book__page-front">
                        <div class="page__content">
                            <h1 class="page__content-book-title">Foundation</h1>
                            <h2 class="page__content-author">Isaac Asimov</h2>

                            <p class="page__content-credits">
                                Introduction by
                                <span>Paul Krugman</span>
                            </p>

                            <p class="page__content-credits">
                                Illustrations by
                                <span>Alex Wells</span>
                            </p>

                            <div class="page__content-copyright">
                                <img style="height: 50px;" src="assets/images/badge2.svg">
                            </div>
                        </div>
                    </div>
                    <div class="book__page-back">
                        <div class="page__content">
                            <h1 class="page__content-title">Contents</h1>
                            <table class="page__content-table">
                                <tr>
                                    <td align="left">Part I</td>
                                    <td align="left">The Psycohistorians</td>
                                    <td align="right">3</td>
                                </tr>
                                <tr>
                                    <td align="left">Part II</td>
                                    <td align="left">The Encyclopedists</td>
                                    <td align="right">43</td>
                                </tr>
                                <tr>
                                    <td align="left">Part III</td>
                                    <td align="left">The Mayors</td>
                                    <td align="right">87</td>
                                </tr>
                                <tr>
                                    <td align="left">Part IV</td>
                                    <td align="left">The Traders</td>
                                    <td align="right">147</td>
                                </tr>
                                <tr>
                                    <td align="left">Part V</td>
                                    <td align="left">The Merchant Princes</td>
                                    <td align="right">173</td>
                                </tr>
                            </table>

                            <div class="page__number">2</div>
                        </div>
                    </div>
                </label>
            </div>
        </div>
    </div>
    <div class="module-footer"></div>
</div>
